<template>
  <div class="withdrawalManage">
    <div class="queryForm">
      <a-form-model :model="queryForm" layout="inline">
        <a-form-model-item label="转账状态">
          <a-select v-model="queryForm.status" style="width: 200px" :allowClear="true">
            <a-select-option :value="0"> 申请中</a-select-option>
            <a-select-option :value="1"> 转账成功</a-select-option>
            <a-select-option :value="2"> 转账失败</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="queryData" :loading="loading">查询</a-button>
          <a-button type="primary" @click="exportTable" style="margin-left: 5px">导出</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <a-table
      :columns="columns"
      :data-source="tableData"
      :loading="tableLoading"
      :pagination="pagination"
      @change="pageChange"
      :rowKey="rowKey"
    >
      <template slot="operate" slot-scope="text, record">
        <a-button v-if="!record.status" size="small" type="primary" @click="changeStatus(record, 1)">通过</a-button>
        <a-button
          v-if="!record.status"
          size="small"
          type="primary"
          @click="changeStatus(record, 2)"
          style="margin-left: 5px;"
        >拒绝
        </a-button>
        <span v-if="record.status">已审核</span>
      </template>
    </a-table>
  </div>
</template>

<script>
  import { backendTiX, exportTabel, changeStatus } from '../../serves';

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      ellipsis: true
    },
    {
      title: '地址名称',
      dataIndex: 'addressName',
      key: 'addressName',
      ellipsis: true
    },
    {
      title: '提现地址',
      dataIndex: 'address',
      key: 'address',
      ellipsis: false,
      width: 330
    },
    {
      title: '提现数量',
      dataIndex: 'amount',
      className: 'column-right',
      key: 'amount',
      ellipsis: true,
      width: 150
    },
    {
      title: '手续费（USDT）',
      dataIndex: 'handleFee',
      className: 'column-right',
      key: 'handleFee',
      ellipsis: true,
      width: 150
    },
    {
      title: '申请提现时间',
      dataIndex: 'createTime',
      key: 'createTime',
      ellipsis: true
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      ellipsis: true,
      customRender: (val) => {
        if (val == 0) {
          return '申请中';
        } else if (val == 1) {
          return '转账成功';
        } else {
          return '转账失败';
        }
      }
    },
    {
      title: '审核',
      dataIndex: 'operate',
      key: 'operate',
      ellipsis: true,
      scopedSlots: {
        customRender: 'operate'
      }
    }
  ];
  export default {
    name: 'PromoteManage',
    data() {
      return {
        columns,
        tableLoading: false,
        tableData: [],
        pagination: {
          current: 1,
          total: 0,
          pageSize: 10,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 条`,
          pageSizeOptions: ['10', '20', '30', '40', '50']
        },
        lastPageSize: 10,
        queryForm: {
          status: ''
        },
        loading: false
      };
    },
    mounted() {
      this.handleQuery();
    },
    methods: {
      queryData() {
        this.loading = true
        this.handleQuery();
      },
      changeStatus(val1, val2) {
        let params = {
          remark: val1.remark,
          id: val1.id,
          status: val2
        };
        changeStatus(params).then((res) => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.handleQuery();
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message);
            this.$router.push({
              path: '/manageLogin'
            });
          } else {
            this.$message.warning(res.data.message);
          }
        });
      },
      exportTable() {
        exportTabel().then((res) => {
          if (res.status == 200 && res.data) {
            let attrs = res.headers['content-disposition'].split(';');
            // 获取文件名
            let fileName = attrs[1].split('=')[1];
            fileName = decodeURIComponent(fileName);
            // 获取数据类型
            let type = res.headers['content-type'].split(';')[0];
            let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
            const a = document.createElement('a');
            // 创建URL
            const blobUrl = window.URL.createObjectURL(blob);
            a.download = fileName;
            a.href = blobUrl;
            document.body.appendChild(a);
            // 下载文件
            a.click();
            // 释放内存
            URL.revokeObjectURL(blobUrl);
            document.body.removeChild(a);
          } else {
            this.$message.warning(res.data.message);
          }
        });
      },
      rowKey(record, index) {
        return index;
      },
      handleQuery() {
        let params = {
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          status: this.queryForm.status
        };
        this.tableLoading = true;
        backendTiX(params).then((res) => {
          if (res.status == 200 && res.data.status.code == 200) {
            this.tableData = res.data.data.records;
            this.pagination.total = res.data.data.total;
          } else if (res.data.status.code == 450) {
            this.$message.warning(res.data.message);
            this.$router.push({
              path: '/manageLogin'
            });
          } else {
            this.$message.warning(res.data.message);
          }
          this.tableLoading = false;
          this.loading = false
        });
      },
      pageChange(val) {
        this.pagination.pageSize = val.pageSize;
        if (val.pageSize != this.lastPageSize) {
          this.pagination.current = 1;
          this.lastPageSize = val.pageSize;
        } else {
          this.pagination.current = val.current;
        }
        this.handleQuery();
      }
    }
  };
</script>

<style lang="scss">
  .withdrawalManage {
    .ant-table-thead > tr > th,
    .ant-table-tbody > tr > td {
      padding: 10px;
    }

    th.column-right,
    td.column-right {
      text-align: right !important;
    }
  }
</style>
